<template name="logItem">
	<view class="logMain">
		<view class="imgBox" v-if="item.resList">
			<block v-for="(itm, ix) in item.resList" :key="ix"><image :src="itm.url" :data-ix="ix" @tap="showImg"></image></block>
		</view>
		<view :class="[showAll ? 'text2' : 'text']">{{ item.memo }}</view>
		<text class="toggleText" v-if="item.memo && item.memo.length > 60" @tap="toggleShow">{{ showAll ? '收起' : '全文' }}</text>
		<view class="timeAndShop">
			<view class="tmAndShop">
				<text class="time">{{ item.time }}</text>
				<text class="shop" v-if="item.storeName">（{{ item.storeName }}）</text>
			</view>
			<view class="btnGroup">
				<text v-if="!item.checkinId" class="iconfont icon-fankui" @tap="toEdit" ></text>
				<text v-if="!item.checkinId" @tap="toEdit" >编辑</text>
				<!-- #ifndef H5 -->
				<!-- <text class="iconfont icon-fenxiang1" @tap="shareLog" ></text>
				<text @tap="shareLog" >分享</text> -->
				<!-- #endif -->
			
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	name: 'logItem', //组件名称
	// 传递参数
	props: {
		item: {
			type: Object,
			default: null
		},

	},
	// 组件参数
	data() {
		return {
			showAll: false
		};
	},
	// 组件方法
	methods: {
		toggleShow() {
			this.showAll = !this.showAll;
		},
		showImg(e) {
			let _ix = parseInt(e.currentTarget.dataset.ix);
			let _arr = [];
			this.item.resList.forEach(x => {
				_arr.push(x.url);
			});
			uni.previewImage({
				current: _ix,
				urls: _arr,
				indicator: 'default'
			});
		},
		toEdit(){
			uni.setStorageSync('log',this.item);
			this.toPage({
				url:'addGrowthRecoed',
				isedit:1,
				id:this.item.id
			})
		},
		shareLog(){
			uni.$emit("showLogShare",{
				id:this.item.id,
				mid:this.item.memberId,
				img:(this.item.resList && this.item.resList.length>0)?this.item.resList[0].url:'http://s.de123.com/kf.png',
			})
		}
	}
};
</script>

<style lang="less">
.logMain {
	display: flex;
	flex-direction: column;
	margin-bottom: 20upx;
	padding-bottom: 20upx;
	border-bottom: 1px dashed #CCCCCC;
}
.imgBox {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	image {
		width: 170upx;
		height: 170upx;
		border-radius: 10upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
}
.text {
	font-size: 30upx;
	color: #202932;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.text2 {
	font-size: 30upx;
	color: #202932;
}
.toggleText {
	font-size: 32upx;
	color: #ffcd11;
	margin: 10upx 0;
}
.timeAndShop {
	display: flex;
	
	margin-top: 10upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.tmAndShop{
		display: flex;
		align-items: center;
		font-size: 30upx;
		color: #959595;
	}
	.shop{
		flex-grow: 1;
	}
	.btnGroup{
		display: flex;
		font-size: 28upx;
		align-items: center;
	}
	.iconfont{
		color: #ffcd11;
		font-size: 40upx;
		width: 50upx;
		text-align: center;
		margin-left: 20upx;
	}
}
</style>
